<template>
  <div
    :id="rosePie"
    :ref="rosePie"
    class="rose-pie"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script>
import { resizeChart, rosePieOptions } from "@/assets/js/echartOptions.js";
export default {
  name: "RosePie",
  data() {
    return {
      chart: null,
      options: null,
      timer: null,
    };
  },
  created() {},
  watch: {
    data: {
      handler(val, old) {
        this.options.data = [...val];
        this.$nextTick(() => {
          this.chart.setOption(rosePieOptions({ ...this.options }), true, true);
        });
      },
      deep: true,
    },

    subtext(val) {
      this.options.subtext = val;
      this.$nextTick(() => {
        this.chart.setOption(rosePieOptions({ ...this.options }), true, true);
      });
    },
  },
  props: {
    rosePie: {
      type: String,
      default: "rosePie",
    },
    text: {
      type: String,
      default: "",
    },
    subtext: {
      type: Number,
    },
    unit: {
      type: String,
      default: "",
    },
    textTop: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => [],
    },
    center: {
      type: Array,
      default: () => ["50%", "50%"],
    },
    grid: {
      type: Object,
      default: () => {},
    },
    pieColor: {
      type: Array,
      default: () => [
        "#35a3fc",
        "#1459d9",
        "#108707",
        "#29dbf8",
        "#fcbd32",
        "#fa5356",
        "#ee76fc",
        "#89f480",
        "#f38053",
        "#25b5b0",
      ],
    },
  },
  destroyed() {
    clearTimeout(this.timer);
  },
  mounted() {
    this.options = {
      rosePie: this.rosePie,
      text: this.text,
      subtext: this.subtext,
      unit: this.unit,
      textTop: this.textTop,
      data: this.data,
      center: this.center,
      grid: this.grid,
      pieColor: this.pieColor,
    };
    this.timer = setTimeout(() => {
      this.chart = this.$echarts.init(this.$refs[this.rosePie]);
      this.$nextTick(() => {
        this.chart.setOption(rosePieOptions({ ...this.options }), true, true);
      });
      resizeChart(this.chart);
    }, 100);
  },
};
</script>
<style scoped>
.rose-pie {
  height: 100%;
  width: 100%;
  color: inherit;
}
</style>
